/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'
import { Swiper } from '@tarojs/components'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http } from '../../../library/func';
import Icon from '../../../project/style/icon';

import DoHttp from '../../../project/func/http/http';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Detail extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			pdata:{
				id:0,
				set_price:100000,
				set_name:"vip商品名称vip商品名称vip商品名称vip商品名称vip商品名称vip商品名称vip商品名称",
				count_sale:1000000,
			},

			object:{

			},


		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {

	}

	componentWillMount(){
		let id = this.$router.params.id;
		DoHttp.get({
			url:'product/detail.php',
			data:{
				id:id
			},
			success:(res)=>{
				console.log(res)
				this.setState({
					pdata:res.product,
				})
			}
		})
	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// onClick
	onClick = (e)=> {
		//post查询是否绑定邀请码
		var is_bind = false;
		if(is_bind){
			//	去支付  
		}else{
			wx.showModal({
				title: '绑定邀请码',
				content: '先绑定邀请码在进行购买',
				confirmText:"去绑定",
				confirmColor:"#f00",
				success (res) {
				  if (res.confirm) {
					  //去绑定页面
				  }
				}
			})
		}

	}
    
    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
    }

    // onNavigate
    onNavigate = (url, e)=> {
		wx.navigateTo({
			url: url
		})
    }

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	navigateBack = (e) => {
		wx.navigateBack();
	}
	


	config = {
        navigationBarTitleText: '购买创业礼包',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		return (
			<CPage>
				<CContent style="background:#F7F7F7">
					
					{/* swiper */}
					<Swiper style="height:700rpx" indicatorColor='#999' indicatorActiveColor='#333' circular indicatorDots>

						{this.state.pdata.object.set_image_big.map((item, key)=>{
							return(

								<SwiperItem>
									<Image style='width:100%; height:700rpx; background:#eee' src={ item }/>
								</SwiperItem>
	
							)

						})}



					</Swiper>

					{/* 价格与购买人数 */}
					<CRow x="center" bg="white">
						<CBetween class="f09" mt='10' y="center">
							<CHand>
								<CText color="#f00" size="12" mt="14">￥</CText>
								<text style="color:#f00; font-size:26px; font-weight:800">{ this.pdata.state.set_price }</text>
							</CHand>
							<text style="color:#666;  font-size:14px; margin-top:10px">{ this.pdata.state.count_sale }人购买</text>
						</CBetween>
					</CRow>


					{/* 商品名称 */}
					<CRow x="center" pb="10" bg="white">
						<text class="f09" style="font-size:16px; font-weight:800">{ this.pdata.state.set_name }</text>
					</CRow>

					{/* 图片标题*/}
					<CRow bg='#fff' h='20' mt='10' py="10" x="cener">
						<CImage h="20" src={ require('../../../assets/image/vipxiangqingti.png') }></CImage>
					</CRow>

					{/* 图片内容*/}
					<CRow bg='#fff' pt="10" pb="70" x="cener">
						<CImage h="440" src={ require('../../../assets/image/vipxiangqingcontent.png') }></CImage>
					</CRow>


				</CContent>

				{/* 商品详情页Footer */}
				<CFooter h='50' bg='#06f'>
					<CBetween h="50"  bg='green'>
						<CHand onClick={ this.navigateBack.bind(this) } class="f03" x="center" y="center" bg="#F64F4E" h="50">
							<CText color="white" size="16">更多礼包</CText>
						</CHand>
						<CHand 
							onClick={ this.onNavigate.bind(this,'/screen/vip/normal/submit?pid='+ this.state.pdata.id) }
							class="f07" x="center" y="center" bg="#D53B31" h="50" >
							<CText color="white" size="16">立刻购买</CText>
						</CHand>
					</CBetween>
				</CFooter>
			</CPage>
		)
	}
}


